<template>
  <div class="pc clearfix"  @drop='dropTemplate($event)' @dragover.prevent>
    <div class="pc-left">
      <div class="l-head">控件(鼠标拖动至右侧即可使用)</div>
      <div class="l-item" draggable="true" @dragstart='dragTemplate($event, "banner")'>
        <div class="l-title">Banner</div>
        <img src="../../assets/floor/banner.png" alt="">
        <div class="l-text" style="margin-bottom: 0;">banner</div>
      </div>
      <div class="l-item">
        <div class="l-title">楼层</div>
        <div class="l-content" draggable="true" @dragstart='dragTemplate($event, wideTemplate[0])'>
          <img src="../../assets/floor/app_hotitems.png" alt="">
          <div class="l-text">专题</div>
        </div>
        <div class="l-content" draggable="true" @dragstart='dragTemplate($event, wideTemplate[1])'>
          <img src="../../assets/floor/susiness.png" alt="">
          <div class="l-text">app店铺</div>
        </div>
        <div class="l-content" draggable="true" @dragstart='dragTemplate($event, wideTemplate[2])'>
          <img src="../../assets/floor/category.png" alt="">
          <div class="l-text">新品上市</div>
        </div>
        <div class="l-content" draggable="true" @dragstart='dragTemplate($event, wideTemplate[3])'>
          <img src="../../assets/floor/applike.png" alt="">
          <div class="l-text">猜你喜欢</div>
        </div>
      </div>
    </div>
    <div class="pc-right">
      <div class='top-nav'>
        <ul class="clearfix">
          <li @click='navLink("home")' :class="{curNav: curChannel == 'home', cur: true}">首页</li>
          <li v-for='(val, index) in channelList' :key='index' @click='navLink(val.value)' :class="{curNav: curChannel == val.value, cur: true}" v-if="val.label != '优选工厂' && val.label != '分类'">
            <span>{{val.label}}</span>
          </li>
        </ul>
      </div>
      <div class="app-wrap">
        <div class="nav clearfix" v-if="curChannel == 'home'">
          <ul class="clearfix">
            <li v-for='(val, index) in channelList' :key='index' :class="{cur: val.label != '优选工厂' && val.label != '分类'}">
              <img src="../../assets/close_r.png" alt="" class="close-icon" @click="delChannelPanel = true; delChannelParams.idList = [val.value]">
              <div class="add-icon" @click='navLink(val.value, val.label)'>
                <img v-lazy="val.iconPath" alt="" >
              </div>
              <div class="n-title">{{val.label}}</div>
            </li>
            <li @click="$router.push(`/channelMange/add?three=${$route.query.three}&terminal=MOBILE`)" class="cur">
              <div class="add-icon">
                <img src="../../assets/floor/add.png" alt="" >
              </div>
            </li>
          </ul>
        </div>
        <!-- 广告位（轮播） -->
        <div class="bannerBox" v-if="advertList.length">
          <banner :advertList='advertList' @refresh='_getAdvertList' :terminal='`MOBILE`'></banner>
        </div>

        <div class="floor-item" v-for="(val, index) in floorList" :key="index" draggable="true" @dragstart='dragSort($event, val.id, val.gfSequence, val.wideTemplate)' @drop.prevent.stop='dropTemplate($event, val.gfSequence, val.wideTemplate)'  @dragover.prevent>
          <div class="option-floor" v-if="val.gfDisplay == '1'">
            <span @click="addFloor(val.id)">编辑楼层 |</span>
            <span @click="delPanel = true; delParams.idList = [val.id]"> 删除楼层</span>
          </div>
          <w-title :isTitle='val.isViewName == "1" && val.gfDisplay == "1"' :title='val.gfName' :enTitle='val.enName' :titleColor='val.gfCss' :keywords='val.keyWord ? val.keyWord.split(",") : []'></w-title>

          <!-- 专题 -->
          <div class="app_hot clearfix" :class='{isTitle: val.isViewName != "1"}' v-if='val.wideTemplate == wideTemplate[0] && val.gfDisplay == "1"'>
            <div v-if="val.wideGoods">
              <div class="left" v-if="JSON.stringify(val.wideGoods.left) != '{}'">
                <img v-lazy="val.wideGoods.left.img" alt="">
                <button class="edit-btn" @click="editFloor(val.wideTemplate,  val.id, 'left')">编辑</button>
              </div>
              <div class="left" v-else>
                <button class="edit-btn" @click="editFloor(val.wideTemplate,  val.id, 'left')">编辑</button>
              </div>

              <div class="right">
                <div class="item two" v-if="JSON.stringify(val.wideGoods.rightUp) != '{}'">
                  <div class="two-box">
                    <div class="box-text">
                      <div>
                        <span :style='`color: #${val.wideGoods.rightUp.titleCol};`'>{{val.wideGoods.rightUp.titleName}}</span>
                      </div>
                      <div :style='`color: #${val.wideGoods.rightUp.subtitleCol};`'>{{val.wideGoods.rightUp.subtitleName}}</div>
                    </div>
                    <img v-lazy="val.wideGoods.rightUp.img" alt="" class="goods_img">
                  </div>
                  <button class="edit-btn" @click="editFloor(val.wideTemplate,  val.id, 'rightUp')">编辑</button>
                </div>
                <div class="item" v-else>
                  <button class="edit-btn" @click="editFloor(val.wideTemplate,  val.id, 'rightUp')">编辑</button>
                </div>

                <div class="item two" v-if="JSON.stringify(val.wideGoods.rightDown) != '{}'">
                  <div class="two-box">
                    <div class="box-text">
                      <div>
                        <span :style='`color: #${val.wideGoods.rightDown.titleCol};`'>{{val.wideGoods.rightDown.titleName}}</span>
                      </div>
                      <div :style='`color: #${val.wideGoods.rightDown.subtitleCol};`'>{{val.wideGoods.rightDown.subtitleName}}</div>
                    </div>
                    <img v-lazy="val.wideGoods.rightDown.img" alt="" class="goods_img">
                  </div>
                  <button class="edit-btn" @click="editFloor(val.wideTemplate,  val.id, 'rightDown')">编辑</button>
                </div>
                <div class="item" v-else>
                  <button class="edit-btn" @click="editFloor(val.wideTemplate,  val.id, 'rightDown')">编辑</button>
                </div>
              </div>
            </div>
            
            <div v-else>
              <div class="left">
                <button class="edit-btn" @click="editFloor(val.wideTemplate,  val.id, 'left')">编辑</button>
              </div>
              <div class="right">
                <div class="item">
                  <button class="edit-btn" @click="editFloor(val.wideTemplate,  val.id, 'rightUp')">编辑</button>
                </div>
                <div class="item">
                  <button class="edit-btn" @click="editFloor(val.wideTemplate,  val.id, 'rightDown')">编辑</button>
                </div>
              </div>
            </div>
          </div>

          <!-- app店铺 -->
          <div class="long" :class='{isTitle: val.isViewName != "1"}' v-if='val.wideTemplate == wideTemplate[1] && val.gfDisplay == "1"'>
            <img v-lazy="val.wideGoods.img" alt="" v-if="val.wideGoods">
            <button class="edit-btn" @click="editFloor(val.wideTemplate,  val.id, '')">编辑</button>
          </div>

          <!-- 新品上市 -->
          <div class="two" :class='{isTitle: val.isViewName != "1"}' v-if='val.wideTemplate == wideTemplate[2] && val.gfDisplay == "1"'>
            <div class="clearfix" v-if="val.wideGoods">
              <div>
                <div class="left" v-if="val.wideGoods.left" :style="`background: url(${val.wideGoods.left.img}) no-repeat center;`">
                  <div class='two-box clearfix'>
                    <div class="box-text">
                      <div>
                        <img v-lazy="val.wideGoods.left.logoImg" alt="">
                        <span :style='`color: #${val.wideGoods.left.titleColor};`'>{{val.wideGoods.left.titleName}}</span>
                      </div>
                      <div :style='`color: #${val.wideGoods.left.subtitleColor};`'>{{val.wideGoods.left.subtitleName}}</div>
                    </div>
                    <!-- <img v-lazy="val.wideGoods.left.img" alt="" class="goods_img"> -->
                  </div>
                  <button class="edit-btn" @click="editFloor(val.wideTemplate,  val.id, 'left')">编辑</button>
                </div>
                <div class="left" v-else>
                  <button class="edit-btn" @click="editFloor(val.wideTemplate,  val.id, 'left')">编辑</button>
                </div>
              </div>
              <div>
                <div class="right" v-if="val.wideGoods.right" :style="`background: url(${val.wideGoods.right.img}) no-repeat center;`">
                  <div class='two-box clearfix'>
                    <div class="box-text">
                      <div>
                        <img v-lazy="val.wideGoods.right.logoImg" alt="">
                        <span :style='`color: #${val.wideGoods.right.titleColor};`'>{{val.wideGoods.right.titleName}}</span>
                      </div>
                      <div :style='`color: #${val.wideGoods.right.subtitleColor};`'>{{val.wideGoods.right.subtitleName}}</div>
                    </div>
                    <!-- <img v-lazy="val.wideGoods.right.img" alt="" class="goods_img"> -->
                  </div>
                  <button class="edit-btn" @click="editFloor(val.wideTemplate,  val.id, 'right')">编辑</button>
                </div>
                <div class="right" v-else>
                  <button class="edit-btn" @click="editFloor(val.wideTemplate,  val.id, 'right')">编辑</button>
                </div>
              </div>
            </div>

            <div class="clearfix" v-else>
              <div class="left">
                <button class="edit-btn" @click="editFloor(val.wideTemplate,  val.id, 'left')">编辑</button>
              </div>
              <div class="right">
                <button class="edit-btn" @click="editFloor(val.wideTemplate,  val.id, 'right')">编辑</button>
              </div>
            </div>
          </div>

          <!-- 猜你喜欢 -->
          <div class="like clearfix" :class='{isTitle: val.isViewName != "1"}' v-if='val.wideTemplate == wideTemplate[3] && val.gfDisplay == "1"'>
            <div v-if="val.wideGoods">
              <div class="like_left" v-for='(value, index) in val.wideGoods.goodsList' :key="index">
                <div class='goods_img'>
                  <img v-lazy="value.img" alt="">
                </div>
                <div class="goods_title">
                  <div class='goods_name'>{{value.goodsName}}</div>
                  <div class="goods_price">￥{{value.goodsPrice}}</div>
                </div>
                <button class="edit-btn" @click="editFloor(val.wideTemplate,  val.id)" v-if="val.wideGoods.goodsList.length > 1 ? index == 1 : index == 0">编辑</button>
              </div>
            </div>
            <div v-else>
              <div class="like_left">
              </div>
              <div class="like_left">
                <button class="edit-btn" @click="editFloor(val.wideTemplate,  val.id)">编辑</button>
              </div>
            </div>
          </div>
        </div>
        
        <div class="add-btn">
          <w-button @on-click="addFloor">新增楼层</w-button>
        </div>
      </div>
    </div>

    <!-- 删除楼层 -->
    <w-panel-fixed-wrap v-model="delPanel"  :panel-title="true" title="删除楼层" :width="`260px`" :height="`200px`" @on-confirm='delOption'>
      <div class="panel-classify">
        是否确认删除该楼层
      </div>
    </w-panel-fixed-wrap>

    <!-- 删除频道 -->
    <w-panel-fixed-wrap v-model="delChannelPanel"  :panel-title="true" title="删除频道" :width="`260px`" :height="`200px`" @on-confirm='delChannelOption'>
      <div class="panel-classify">
        是否确认删除该频道
      </div>
    </w-panel-fixed-wrap>
  </div>
  
</template>

<script>
import { apiFloorMange, apiDecorateMange } from 'js/api'
import { mapGetters, mapActions } from 'vuex'
import Banner from './components/banner'
import Title from './components/title'

export default {
  data() {
    return {
      delPanel: false,
      delChannelPanel: false,
      wideTemplate: ['app_hotitems', 'susiness', 'category', 'applike'],
      floorList: [], // 楼层列表
      advertList: [], // 广告列表
      curChannel: this.$route.query.curChannel || 'home', // 当前频道id/首页
      advId: '-2', // 首页/频道 对应的广告位
      // 查询楼层 -- 参数
      queryFloor: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        deviceType: 'MOBILE', // 查询首页楼层 -- 需要
        channelId: '', // 查询频道楼层 -- 需要
        currentPage: 1,
        showCount: 15
      },
      // 添加楼层 -- 参数
      addParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        gfCss: 'f00384',
        deviceType: 'MOBILE', // 添加首页楼层 -- 需要
        cfChId: '', // 添加频道楼层 -- 需要
        gfSequence: '', // 添加首页楼层 -- 需要
        cfSequence: '', // 添加频道楼层 -- 需要
        id: '',
        gfDisplay: '1',
        disPlay: '1',
        wideTemplate: '',
        oldSequence: '',
        nowSequence: ''
      },
      // 删除楼层 -- 参数
      delParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        idList: []
      },
      // 查询广告 -- 参数
      queryAdvert: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        advId: '',
        currentPage: 1,
        showCount: 999
      },
      // 添加广告 -- 参数
      advertParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        adApId: ''
      },
      isAppLike: false,
      // 删除频道 -- 参数
      delChannelParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        idList: []
      }
    }
  },
  components: {
    'banner': Banner,
    'w-title': Title
  },
  computed: {
    ...mapGetters(['token', 'channelList'])
  },
  created() {
    this.fetchChannelList({token: this.token, terminal: 'MOBILE', three: this.$route.query.three, isShowClassify: 'show'})
    this._getFloorList(this.curChannel)
  },
  watch: {
    '$route'() {
      if (!this.$route.query.curChannel) {
        this.curChannel = 'home'
      } else {
        this.curChannel = this.$route.query.curChannel
      }
      this._getFloorList(this.curChannel)
    }
  },
  methods: {
    ...mapActions(['fetchChannelList']),
    // 获取 楼层列表
    _getFloorList(type) {
      this.floorList = []
      this.curChannel = type
      this.queryFloor.accessToken = this.token
      if (this.curChannel == 'home') {
        this.queryFloor.deviceType = 'MOBILE'
        this.queryFloor.channelId = ''
        apiFloorMange.queryHFloorList(this.queryFloor).then(data => {
          const list = data.data.recordList || []
          this.floorList = list.map(item => {
            return {
              deviceType: item.deviceType,
              enName: item.enName || '',
              gfDisplay: item.gfDisplay || '0',
              isViewName: item.isViewName || '0',
              gfName: item.gfName || '',
              gfCss: item.gfCss,
              gfSequence: item.gfSequence,
              id: item.id,
              keyWord: item.keyWord || '',
              wideGoods: item.wideGoods ? JSON.parse(item.wideGoods) : '',
              wideTemplate: item.wideTemplate
            }
          })
          for (let i = 0; i < this.floorList.length; i++) {
            // 当模板类型为 category，判断 left right 是否有值
            if (this.floorList[i].wideTemplate == 'category') {
              for (let j = 0; j < 2; j++) {
                if (this.floorList[i].wideGoods) {
                  if (this.floorList[i].wideGoods.CategoryList[j].direction == 'left') {
                    this.floorList[i].wideGoods.left = this.floorList[i].wideGoods.CategoryList[j]
                  }
                  if (this.floorList[i].wideGoods.CategoryList[j].direction == 'right') {
                    this.floorList[i].wideGoods.right = this.floorList[i].wideGoods.CategoryList[j]
                  }
                }
              }
            }
            // 判断是否有 猜你喜欢 楼层
            if (this.floorList[i].wideTemplate == 'applike') {
              this.isAppLike = true
            }
          }
        })
        // 首页的 广告位id 固定 -2
        this.queryAdvert.advId = '-2'
        this._getAdvertList()
      } else {
        this.queryFloor.deviceType = ''
        this.queryFloor.channelId = this.curChannel
        apiFloorMange.queryCFloorList(this.queryFloor).then(data => {
          const list = data.data.recordList || []
          // 重组 floorList,首页和频道 楼层 参数统一
          this.floorList = list.map(item => {
            return {
              deviceType: 'MOBILE',
              enName: '',
              gfDisplay: item.disPlay || '0',
              isViewName: item.isViewName || '0',
              gfName: item.cfName || '',
              gfCss: item.gfCss,
              gfSequence: item.cfSequence,
              id: item.id,
              keyWord: item.keyWord || '',
              wideGoods: item.wideGoods ? JSON.parse(item.wideGoods) : '',
              wideTemplate: item.wideTemplate
            }
          })
          for (let i = 0; i < this.floorList.length; i++) {
            // 当模板类型为 category，判断 left right 是否有值
            if (this.floorList[i].wideTemplate == 'category') {
              for (let j = 0; j < 2; j++) {
                if (this.floorList[i].wideGoods) {
                  if (this.floorList[i].wideGoods.CategoryList[j].direction == 'left') {
                    this.floorList[i].wideGoods.left = this.floorList[i].wideGoods.CategoryList[j]
                  }
                  if (this.floorList[i].wideGoods.CategoryList[j].direction == 'right') {
                    this.floorList[i].wideGoods.right = this.floorList[i].wideGoods.CategoryList[j]
                  }
                }
              }
            }
            // 判断是否有 猜你喜欢 楼层
            if (this.floorList[i].wideTemplate == 'applike') {
              this.isAppLike = true
            }
          }
        })
        // 根据频道 id 获取到 广告位 id
        const par = {
          accessToken: this.token,
          threeMenuCode: this.$route.query.three || '',
          id: this.curChannel
        }
        apiDecorateMange.getChannelInfo(par).then(data => {
          if (data.code != 200) return
          this.queryAdvert.advId = data.data.channelInfo.advPosId || ''
          this._getAdvertList()
        })
      }
    },
    // 获取广告 列表
    _getAdvertList() {
      this.queryAdvert.accessToken = this.token
      // this.queryAdvert.advId = this.advId
      apiDecorateMange.getAdvertList(this.queryAdvert).then(data => {
        this.advertList = data.data.recordList || []
      })
    },
    // 开始 拖动 模板 时
    dragTemplate(event, temp) {
      event.dataTransfer.setData('temp', temp)
      this.addParams.id = ''
      this.addParams.oldSequence = ''
    },
    // 拖动排序
    dragSort(event, id, sequence, temp) {
      // 猜你喜欢 需要在楼层的最后，不能拖动
      if (temp == 'applike') return
      event.dataTransfer.setData('temp', temp)
      this.addParams.id = Number(id)
      this.addParams.oldSequence = sequence
    },
    // 模板 停止拖动
    dropTemplate(event, index, targetTemp) {
      let temp = event.dataTransfer.getData('temp')
      // 如果添加的是banner,则给当前频道添加广告
      if (temp === 'banner') {
        this.addAdvert()
        return
      }
      // 当拖动的模板为 猜你喜欢，模板放到楼层的最后
      if (temp == 'applike') {
        let lastIndex = 0
        if (this.floorList.length) {
          lastIndex = Number(this.floorList[this.floorList.length -1].gfSequence) + 1
        }
        this.submitAddFloor(lastIndex, temp)
        return
      }
      // 如果触发的是装修页面根元素身上的drop事件，则index===undefined，表明楼层添加在频道列表的最后，由此拿到楼层的序号
      if (index===undefined) {
        // 楼层添加在列表最后，需要拿到 最后一个楼层的排序
        let lastIndex = 0
        if (this.floorList.length) {
          if (this.isAppLike) { // 当有 猜你喜欢 模板时，新增到倒数第二个
            if (this.floorList.length > 1) {
              lastIndex = Number(this.floorList[this.floorList.length -2].gfSequence) + 1
            }
          } else {
            lastIndex = Number(this.floorList[this.floorList.length -1].gfSequence) + 1
          }
        }
        if (this.addParams.id) { // 拖动排序时
          lastIndex--
        }
        this.submitAddFloor(lastIndex, temp)
      } else {
        // dirction指示鼠标的落点在drop元素的上半区还是下半区
        let direction = 'up'
        let mouseY = event.clientY
        let elY = event.currentTarget.getBoundingClientRect().top
        let height = event.currentTarget.clientHeight
        // 判断鼠标落点在drop元素的位置
        if (mouseY - elY > (height / 2) && targetTemp != 'applike') { 
          direction = 'down'
        }
        if (direction === 'down') {
          index++
        }
        if (this.addParams.id && targetTemp == 'applike') {
          index--
        }
        this.submitAddFloor(index, temp)
      }
    },
    // 添加 广告
    addAdvert() {
      this.advertParams.accessToken = this.token
      this.advertParams.adApId = this.queryAdvert.advId
      apiDecorateMange.addAdvert(this.advertParams).then(data => {
        if (data.code != 200) return
        this.$toast('广告新增成功', () => {
          this._getAdvertList()
        })
      })
    },
    // 频道 跳转
    navLink(curValue, label) {
      if (label == '优选工厂' || label == '分类') return
      this.$router.push(`/homeDecorate/app?three=${this.$route.query.three}&cIndex=${this.$route.query.cIndex}&curChannel=${curValue}`)
    },
    // 编辑楼层模板
    editFloor(temp, id, pos) {
      this.$router.push(`/homeDecorate/appEdit?three=${this.$route.query.three}&wideTemplate=${temp}&id=${id}&pos=${pos}&curChannel=${this.curChannel}`)
    },
    // 新增/编辑楼层 跳转
    addFloor(id) {
      if (this.curChannel == 'home') {
        if (id) {
          this.$router.push(`/floorMange/add?three=${this.$route.query.three}&id=${id}&terminal=MOBILE`)
        } else {
          this.$router.push(`/floorMange/add?three=${this.$route.query.three}&terminal=MOBILE`)
        }
      } else {
        if (id) {
          this.$router.push(`/floorMange/cAdd?three=${this.$route.query.three}&id=${id}&terminal=MOBILE`)
        } else {
          this.$router.push(`/floorMange/cAdd?three=${this.$route.query.three}&terminal=MOBILE&chId=${this.curChannel}`)
        }
      }
    },
    // 提交 楼层 添加
    submitAddFloor(gfSequence, temp) {
      if (!temp) return
      this.addParams.accessToken = this.token
      this.addParams.cfChId = this.curChannel == 'home' ? '' : this.curChannel
      this.addParams.deviceType = this.curChannel == 'home' ? 'MOBILE' : ''
      this.addParams.wideTemplate = temp
      if (this.curChannel == 'home') {
        this.addParams.nowSequence = this.addParams.gfSequence = String(gfSequence)
        this.addParams.cfSequence = ''
        apiFloorMange.addHFloor(this.addParams).then(data => {
          if (data && data.code != 200) return
          if (!this.addParams.id) {
            this.$toast('首页楼层添加成功', () => {
              this._getFloorList('home')
            })
          } else {
            this._getFloorList('home')
          }
        })
      } else {
        this.addParams.nowSequence = this.addParams.cfSequence = String(gfSequence)
        this.addParams.gfSequence = ''
        apiFloorMange.addCFloor(this.addParams).then(data => {
          if (data && data.code != 200) return
          if (!this.addParams.id) {
            this.$toast('频道楼层添加成功', () => {
              this._getFloorList(this.curChannel)
            })
          } else {
            this._getFloorList(this.curChannel)
          }
        })
      }
    },
    // 删除楼层
    delOption() {
      this.delParams.accessToken = this.token
      if (this.curChannel == 'home') {
        apiFloorMange.delHFloor(this.delParams).then(data => {
          if (data.code != 200) return
          this.$toast('楼层删除成功', () => {
            this.delPanel = false
            this._getFloorList('home')
          })
        })
      } else {
        apiFloorMange.delCFloor(this.delParams).then(data => {
          if (data.code != 200) return
          this.$toast('楼层删除成功', () => {
            this.delPanel = false
            this._getFloorList(this.curChannel)
          })
        })
      }
    },
    // 删除频道
    delChannelOption() {
      this.delChannelParams.accessToken = this.token
      apiDecorateMange.delChannel(this.delChannelParams).then(data => {
        if (data.code != '200') return
        this.$toast('删除成功', () => {
          this.delChannelPanel = false
          this.fetchChannelList({token: this.token, terminal: 'MOBILE', three: this.$route.query.three})
        })
      })
    }
  }
}
</script>

<style lang='scss' scoped>
@import '../../scss/_var.scss';
.pc-left {
  width: 290px;
  height: 1059px;
  float: left;
  border: 1px solid $border-gray-light;
  .l-head {
    height: 38px;
    line-height: 38px;
    background: $color-main;
    padding-left: 10px;
    color: #fff;
  }
  .l-item {
    padding: 0 14px;
    .l-title {
      margin: 10px 0;
    }
    .l-text {
      text-align: center;
      margin: 10px 0;
      font-size: 12px;
    }
  }
}
.pc-right {
  width: 880px;
  float: right;
  position: relative;
  border: 1px solid $border-gray-light;
  .title {
    height: 30px;
    line-height: 30px;
    margin-top: 10px;
  }
  .top-nav {
    border-bottom: 1px solid $border-gray-light;
    margin-bottom: 20px;
    ul li {
      float: left;
      padding: 0 15px;
      font-size: 12px;
      height: 30px;
      line-height: 30px;
      &.curNav {
        border-bottom: 2px solid $color-main;
      }
    }
  }
  .app-wrap {
    width: 400px;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid $border-gray-light;
    border-bottom: 0;
    .nav {
      ul li {
        float: left;
        width: 75px;
        position: relative;
        padding-bottom: 10px;
        .n-title {
          font-size: 12px;
          text-align: center;
          padding-top: 5px;
        }
        .add-icon {
          width: 45px;
          height: 45px;
          margin: 0 auto;
          img {
            border-radius: 50%;
          }
        }
        .close-icon {
          width: 16px;
          height: 16px;
          position: absolute;
          top: -4px;
          right: 6px;
        }
      }
    }
    .bannerBox {
      width: 100%;
      height: 143px;
      background: $bg-gray;
      position: relative;
    }
    .left {
      float: left;
      background: $bg-gray;
    }
    .right {
      float: right;
      background: $bg-gray;
    }
    .app_hot {
      .title{
        height: 30px;
        line-height: 30px;
        font-weight: bold;
      }
      .left {
        width: 160px;
        height: 240px;
        position: relative;
      }
      .right {
        & > div {
          width: 217px;
          height: 120px;
          position: relative;
          border-left: 1px solid $border-gray-light;
          &:first-child {
            border-bottom: 1px solid $border-gray-light;
          }
        }
      }
    }
    .long {
      width: 100%;
      height: 120px;
      background: $bg-gray;
      position: relative;
    }
    .isTitle {
      margin-top: 20px;
    }
  }
}
.option-floor {
  position: absolute;
  right: 20px;
  color: $color-main;
  font-size: 12px;
  cursor: pointer;
}
.add-btn {
  text-align: right;
  margin-top: 20px;
}
.edit-btn {
  width: 40px;
  height: 20px;
  border-radius: 10px;
  background: $color-main;
  position: absolute;
  top: 10px;
  right: 10px;
  color: #fff;
  font-size: 12px;
}
// app店铺
.two {
  height: 97px;
  .left, .right{
    width: 185px;
    height: 97px;
    position: relative;
    // background: $bg-gray;
    background-size: 100% 100% !important;
    border: 1px solid #f5f5f5 !important;
    box-shadow: 2px 2px 5px #f5f5f5 !important;
  }
  .two-box {
    padding: 20px 15px;
    .box-text {
      float: left;
      div {
        height: 30px;
        line-height: 30px;
      }
      img {
        width: 14px;
        height: 14px;
      }
    } 
  }
}
.goods_img {
  width: 44px;
  height: 60px;
  float: right;
}
// 猜你喜欢
.like {
  .like_left {
    float: left;
    width: 185px;
    height: 288px;
    position: relative;
    background: $bg-gray;
    &:nth-child(odd) {
      margin-right: 8px;
      margin-bottom: 10px;
    }
    .goods_img {
      width: 100%;
      height: 195px;
      margin-bottom: 10px;
    }
    .goods_title {
      padding: 0 10px;
      .goods_name {
        width: 100%;
        height: 40px;
        overflow: hidden;
      }
      .goods_price {
        color: $color-main;
      }
    }
    
  }
}
</style>
